<template>
	<view class="parse-wrap" :class="{ fold: isFold }" v-if="description">
		<up-parse :content="description" @ready="ready" lazyLoad="false"></up-parse>
		<view v-if="isFold" class="open-box">
			<view class="box" @click.stop="navigateTo(`/pages/hy/scenic/intro?id=${id}`)">
				展开全部
				<image class="img" :src="`${imgBaseUrl}icon-dropdown.png`" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { navigateTo } from "@/utils/page-redirect"
const imgBaseUrl = inject("imgBaseUrl")
const emit = defineEmits(["richTextReady"])
const props = defineProps({
	description: {
		type: String,
		default: "",
	},
	id: {
		type: String,
		default: "",
	},
})

const isFold = ref(false)
// 默认展示500rpx高度的内容，超出则折叠
const base = uni.upx2px(550)

const ready = (data: { height: number }) => {
	if (data?.height > base) {
		isFold.value = true
	}
	console.log("is ready")
	emit("richTextReady")
}
</script>

<style lang="scss" scoped>
.parse-wrap {
	position: relative;

	&.fold {
		max-height: 550rpx;
		overflow: hidden;
	}
}

.open-box {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 96rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 44%, #ffffff 99%);
}

.box {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 164rpx;
	height: 64rpx;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 32rpx;
	border: 2rpx solid #e5e6eb;
	font-weight: 400;
	font-size: 24rpx;
	color: #1d2129;
	line-height: 36rpx;

	.img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 4rpx;
	}
}
</style>
